<template>
  <div class="w-full pb-80px text-14px" v-if="list.length > 0">
    <!-- <div
      class="w-full h-72px flex flex-col justify-center items-center bg-[#F0F7FF]"
    >
      <div class="text-25px">{{ num }}</div>
      <div class="mt-10px">今日完善信息人数</div>
    </div> -->
    <div>
      <div class="p-20px bg-white border-b" v-for="item in list">
        <div class="w-full flex justify-between items-center">
          <div>{{ item.mobile }}</div>
          <div>+{{ item.num }}</div>
        </div>
        <div class="w-full flex justify-between items-center mt-15px">
          <div>{{ item.name }} ({{ item.mobile }})</div>
          <div>今日记账：{{ item.jz_num }}</div>
        </div>
      </div>
    </div>
    <pagination
      @back="back"
      @next="next"
      :current_page="current_page"
      :last_page="last_page"
      :per_page="per_page"
      :total="total"
    ></pagination>
  </div>
  <div v-else class="mt-200px">
    <nodata></nodata>
  </div>
</template>
<script setup>
import pagination from "@/components/pagination.vue";
import { myFans } from "@/util/api";
import nodata from "@/components/nodata.vue";
const page = ref(1);
const current_page = ref(0);
const last_page = ref(0);
const per_page = ref(0);
const total = ref(0);
const list = ref([]);
const num = ref(0); //今日完善人数
const getData = async () => {
  const res = await myFans({ page: page.value });
  current_page.value = res.msg.current_page;
  last_page.value = res.msg.last_page;
  per_page.value = res.msg.per_page;
  total.value = res.msg.total;
  list.value = res.msg.data;
  num.value = res.msg.edit_num;
};
getData();
const back = () => {
  page.value--;
  getData();
};
const next = () => {
  page.value++;
  getData();
};
</script>
